<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="jquery.js" charset="utf-8"></script>
    <script>
		
     //es6中promise使用。可把异步操作改成同步执行
	/* var p=new Promise(function(resolve,reject){
		 resolve('成功了')
	 })
	 console.log(p) //Promise对象
	 p.then(re=>{
	 	 console.log(re);
	 }).catch(err=>{
	 	 console.log(err);
	 }) */
	
	//es7中新增 async 函数，async 是“异步”的简写， async 用于申明一个异步的 function 。
	// await 可以认为是 async wait 的简写，await 用于等待一个异步方法执行完成。它返回一个 Promise 对象。它更简介，也可把异步执行弄成同步执行 。
	// 只能在函数外使用。async内部相当于封装了promise对象
	 /*  	async function show(){
			return "Hello world!";
		}
		
		console.log('async返回的是promise对象',show()); //Promise对象
		show().then(re=>{
			 console.log(re);
		}).catch(err=>{
			 console.log(err);
		})  */
	
	
	//除了async外，跟它搭配使用的一个叫await 。await的功能相当于代替promise中.then执行的内容。await 要的是异步执行的内容
	// !!!注意问题 ,如果有await必须有async。async要放在await最近一个函数的外面
/* 	 async function show(){
			var a1= await $.ajax({url: 'data/1.json'}) 
			console.log(a1)
		}
		
	show()  */
	
	// 用async,await实现promise功能 
	//原来promise中ajax请求
 	/* var p=new Promise(function(resolve,reject){
		 $.ajax({
		 	url:'data/arr.txt',
		 	success:function(res){
		 		resolve(res) //成功回调
		 	},
		 	error:function(err){
		 		reject(err) //失败回调
		 	}
		 })
		 
	 })	
	  
	p.then(
	   function(res){
		  console.log('成功了',res)
	    },
	   function(err){
	       console.log('失败了',err)
	   }
	)  */
	
	
	//用async,await实现promise功能 
	
	 /* 	async function getAsync(){
			var a1= await $.ajax({url: 'data/1.json'}) 
			
			var a2= await $.ajax({url: 'data/2.json'})
		
			var a3= await $.ajax({url: 'data/3.json'})
			
			console.log(78,a1,a2,a3)
		}
		
		getAsync()   */
		
		
	 //async，await与promise有时是相辅相成的。比如在封装后台给的不同接口地址时，就需要对ajax进行在次封装
	
	 //解决问题1-封装统一接口地址,像在次网络封装wx.request,uni.request等
    function getAjax(url2){
	 		return new Promise(function(resolve,reject){
	 			 $.ajax({
	 			 	url:url2, //接口地址
	 			 	success:function(res){
	 			 		resolve(res) //成功回调
	 			 	},
	 			 	error:function(err){
	 			 		reject(err) //失败回调
	 			 	}
	 			 })
	 			 
	 		 })	
	 		  
	 	}
	async function getAsync(){
		
	    var a1= await getAjax('data/1.json')  //外面传入不同的接口路径
		
		var a2= await getAjax('data/2.json')
		
				
	    var a3= await getAjax('data/3.json')
		
		console.log(111,a1,a2,a3)	
	}
	
	getAsync() 
		
		
	 //解决问题2-ajax回调地狱问题-下次的数据，依赖上次的数据
	 //根据异步1的结果，是否执行2或者3。这样就解决了ajax层层嵌套这些回调地狱
	/*   async function getAsync(){
	 	var a1= await getAjax('data/1.json') 
	
	 	if(a1){//条件不满足,不执行
	 		var a2= await getAjax('data/2.json')
			if(a2){
				console.log('a2的结果执行了')
			}
	 	}
	 	else{
	 		var a3= await getAjax('data/3.json')
			if(a3){
				console.log('a3的结果执行了')
			}
	 	}
	 	
	 }
	 
	 getAsync()   */
	 
     //async，await的错误处理-如果请求发生异常，怎么处理？把await 放到 try 中进行执行，如有异常，就使用catch 进行处理
   //还原问题-网络请求不可控，会影响后面代码执行
/*   async function getAsync2(){
          
              let res1=await getAjax('data/11.json')
              let res2=await getAjax('data/2.json')
              console.log(144,res1,res2)
              
             //后边有代码会影响,因为上面有错误
             console.log('ccc')
     }
  getAsync2() */

  //解决问题  js原生 try{放网络请求可能出错} catch{捕获错误}
/*   async function getAsync1(){
        try {
          let res1=await getAjax('data/11.json')
          let res2=await getAjax('data/2.json')
          console.log(res1,res2)
          
        } catch (error) {
            console.log('捕捉错误异常，不影响后续代码执行',error); 
        }
         //后边有代码也不会影响执行
         console.log('ccc');
 }
getAsync1() */

/* 

总结：async/await的优缺点

它是把异步请求变成同步执行的.async放在最近函数外调用,返回的是promise对象.
1.方便级联调用：即调用依次发生的场景；

2.同步代码编写方式： Promise使用then函数进行链式调用，一直点点点，是一种从左向右的横向写法；
async/await从上到下，顺序执行，就像写同步代码一样，更符合代码编写习惯；

缺点：
没有catch错误处理，需要用js原生的try,catch进行错误处理 

*/
</script>
</head>
<body>

</body>
</html>
